<script>
import { statcUrl } from "../api/api"; //引入图片路径
import { formatDate } from "../util/tool";
import { S_Status } from "../pages/config/config";
import {
  confirmOrder,
  saveArticle,
  updateOrderProlist,
} from "../api/otherServer";
export default {
  props: ["ordertail", "data", "changeOrderStatus"],
  data() {
    return {
      statcUrl,
      S_Status,
      show: false,
      message: "", //评价内容
      score: 0, //默认几颗星
      id: "",
    };
  },
  computed: {
    getProlist() {
      return this.data.prolist ? JSON.parse(this.data.prolist) : [];
    },
    detailData() {
      //格式化时间
      let str = formatDate(this.getProlist.createtime, "YYYY-MM-DD hh:mm:ss");
      return str;
    },
  },
  methods: {
    handleConfirmOrder() {
      // 确认收货
      const { orderid } = this.data;
      confirmOrder({ orderid }, (res) => {
        console.log(res);
        this.changeOrderStatus(orderid, "status", 3); // 修改父组件对应订单数据的status
      });
    },
    handleshowEvaluate(proid) {
      //打开评价的弹窗进行内容清空
      this.show = true;
      this.message = "";
      this.score = "5";
      this.id = proid;
      console.log(this.id);
    },
    handleArticle() {
      saveArticle(
        { text: this.message, proid: this.id, score: this.score },
        (res) => {
          this.show = false;
          for (let i = 0; i < this.getProlist.length; i++) {
            if (this.getProlist[i].id == this.id) {
              this.getProlist[i].hasarticle = true;
              break;
            }
          }
          updateOrderProlist(
            {
              prolist: JSON.stringify(this.getProlist), //商品数据
              orderid: this.data.orderid, //订单编号
            },
            (res) => {
              //将订单的数据重新更新到订单列表
              this.changeOrderStatus(
                this.data.orderid,
                "prolist",
                JSON.stringify(this.getProlist)
              );
              this.changeOrderStatus(this.data.orderid, "status", 4); //将父组件的状态改成4
            }
          );
        }
      );
    },
  },
};
</script>
<template>
  <van-nav-bar
    title="订单详情"
    left-text="返回"
    left-arrow
    @click-left="this.ordertail"
  />
  <van-card
    v-for="item in getProlist"
    :key="item.id"
    :num="item.num"
    :price="item.price"
    :title="item.title"
    :thumb="statcUrl + '/' + item.img"
  >
    <template #tags>
      <van-tag plain type="danger" v-if="item.color"
        >颜色:{{ item.color }}</van-tag
      >

      <van-tag
        plain
        type="danger"
        style="width: 30px; height: 20px; border: 1px solid red"
        >尺寸：{{ item.size }}</van-tag
      >
    </template>
    <!-- 评价的按钮应该是对每一款商品进行评价 -->
    <template #footer>
      <van-button
        type="success"
        size="mini"
        v-if="data.status >= 3 && !item.hasarticle"
        @click="handleshowEvaluate(item.id)"
        >我要评价</van-button
      >
      <van-tag
        type="success"
        v-if="item.hasarticle"
        style="width: 20px; height: 15px; background-color: greenyellow"
        >已评价</van-tag
      ></template
    >
  </van-card>
  <div class="detail-box">
    <dl>
      <dt>收获地址:</dt>
      <dd>{{ data.address }}</dd>
    </dl>
    <dl>
      <dt>下单时间:</dt>
      <dd>{{ detailData }}</dd>
    </dl>
    <dl>
      <dt>订单编号:</dt>
      <dd>{{ data.orderid }}</dd>
    </dl>

    <dl>
      <dt>订单状态:</dt>
      <dd>{{ S_Status[data.status] }}</dd>
    </dl>
    <dl v-if="data.status > 1">
      <dt>物流名称:</dt>
      <dd>{{ data.EMSname }}</dd>
    </dl>
    <dl v-if="data.status > 1">
      <dt>物流单号</dt>
      <dd>{{ data.EMS }}</dd>
    </dl>
    <dl>
      <dt></dt>
      <dd>
        <van-button
          type="success"
          size="mini"
          v-if="data.status === 2"
          @click="handleConfirmOrder"
          >确认收货</van-button
        >

        <van-popup v-model:show="show">
          <div class="arctrl">
            <van-cell-group inset>
              <van-field
                v-model="message"
                rows="2"
                autosize
                label="留言"
                type="textarea"
                maxlength="200"
                placeholder="请输入留言"
                show-word-limit
              />
            </van-cell-group>
            <!-- 打分 -->
            <van-rate v-model="score" :count="5" />
            <p class="butt-container">
              <van-button type="primary" @click="handleArticle"
                >提交</van-button
              >
            </p>
          </div>
        </van-popup>
      </dd>
    </dl>
  </div>
  <div class="payContainer">
    <van-submit-bar
      :price="data.allprice * 100"
      button-text="确认付款"
      @submit="onOrderpay"
    />
  </div>
</template>
<style lang="scss">
.van-popup--center {
  width: 80%;

  .arctrl {
    text-align: center;

    .butt-container {
      margin-top: 22px;
      margin-bottom: 10px;
    }
  }
}
.van-card {
  margin-top: 0;
  background: #fff !important;
  .van-tag {
    width: 30px;
    height: 20px;
    border: 1px solid red;
  }
}
.payContainer {
  .van-submit-bar {
    bottom: 0 !important;
  }
}

.detail-box {
  margin-top: 0.2rem;
  display: flex;
  flex-direction: column;
  width: 100%;

  dl {
    // width: 0.48rem;
    padding: 0.4rem 0;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    padding-left: 0.3rem;
    dt {
      font-size: 0.2rem;
      margin-right: 1rem;
      font-weight: bold;
    }
    dd {
      font-size: 0.2rem;
    }
  }
}
</style>
